<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bilibili 番剧/影视详情</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        @font-face {
            font-family: 'vanfont';
            src: url('data:font/ttf;base64,{{ font_van_base64 }}');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'van';
            src: url(data:font/truetype;base64,{{ font_van_base64 }}) format('truetype');
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        }

        body {
            display: inline-block;
            background-color: #ffffff;
        }

        .card {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            margin: 10px;
            overflow: hidden;
            width: 450px;
            max-width: 100%;
            color: #333;
            border: 1px solid #f0f0f0;
        }

        .cover img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 3 / 4;
            object-fit: cover;
        }

        .info {
            padding: 15px 18px;
        }

        .title-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .title {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            color: #181818;
            margin-right: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .meta-right {
            text-align: right;
            flex-shrink: 0;
        }

        .type-name {
            display: inline-block;
            font-size: 12px;
            background-color: #fb7299;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .rating {
            font-size: 14px;
            color: #ffb400;
            font-weight: bold;
        }

        .rating .count {
            font-size: 11px;
            color: #999;
            font-weight: normal;
            margin-left: 3px;
        }

        .details {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .details span {
            margin-right: 8px;
            background-color: #f7f7f7;
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 4px;
        }

        .desc {
            font-size: 13px;
            color: #555;
            line-height: 1.6;
            margin-top: 8px;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-left: 0;
            border-left: none;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px 5px;
            margin: 15px 0 10px;
            font-size: 12px;
            color: #666;
            text-align: center;
            border-top: 1px solid #f0f0f0;
            padding-top: 12px;
        }

        .stats>span {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .stats>span::before {
            display: block;
            font-family: 'van';
            font-size: 30px;
            margin-bottom: 2px;
            color: #aaa;
        }

        .stats .views::before {
            content: "\e6e6";
        }

        .stats .danmakus::before {
            content: "\e6e7";
        }

        .stats .favorites::before {
            content: "\e6e1";
        }

        .stats .reply::before {
            content: "\e6b9";
        }

        .stats .likes::before {
            content: "\e6e0";
        }

        .stats .coins::before {
            content: "\e6e4";
        }

        .stats .share::before {
            content: "\e72f";
        }

        .portal {
            position: relative;
            width: 100%;
            height: 55px;
            background-color: #fff8fa;
            margin-top: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            border-top: 1px solid #f0f0f0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .portal .bili-logo {
            font-size: 22px;
            font-weight: bold;
            color: #fb7299;
        }
    </style>
</head>

<body>
    <div class="card">
        {% if cover_image_src %}
        <div class="cover">
            <img src="{{ cover_image_src }}" alt="Season Cover" />
        </div>
        {% endif %}
        <div class="info">
            <div class="title-container">
                <div class="title">
                    {{ title }} {# 现在 title 优先是分集标题 #}
                    {% if season_title %}
                    <span style="font-size: 13px; color: #888; display: block; font-weight: normal;">(所属系列: {{
                        season_title }})</span>
                    {% endif %}
                </div>
                <div class="meta-right">
                    <div class="type-name">{{ type_name }}</div>
                    {% if rating_score > 0 %}
                    <div class="rating">
                        {{ rating_score }}<span class="count">({{ rating_count }}人评)</span>
                    </div>
                    {% else %}
                    <div class="rating" style="color: #999; font-weight: normal;">暂无评分</div>
                    {% endif %}
                </div>
            </div>
            <div class="details">
                <span>{{ status_text }} ({{ total_ep }}话)</span>
                {% if areas %}<span>地区: {{ areas }}</span>{% endif %}
                {% if styles %}<span>风格: {{ styles }}</span>{% endif %}
            </div>
            {% if desc %}
            <div class="desc">{{ desc | replace("\n", "<br>") | safe }}</div>
            {% endif %}
            <div class="stats">
                <span class="views">{{ view_count }}<br>播放</span>
                <span class="danmakus">{{ dm_count }}<br>弹幕</span>
                <span class="favorites">{{ fav_count }}<br>{{ fav_label }}</span> {# 使用 fav_label #}
                <span class="reply">{{ reply_count }}<br>评论</span>
                <span class="likes">{{ like_count }}<br>点赞</span>
                <span class="coins">{{ coin_count }}<br>投币</span>
                <span class="share">{{ share_count }}<br>分享</span>
                <span></span>
            </div>
        </div>
        <div class="portal">
            <span class="bili-logo">bilibili</span>
        </div>
    </div>
</body>

</html>